<template>
    <t-modal :width="950" :visible="visible" :title="title" @ok="handleSubmit" @cancel="close"
             style="top:50px" cancelText="关闭">
        <a-row class="t-row" :gutter="24" style="background-color: #ececec; padding: 10px; margin: -10px">
            <a-col :md="8" :sm="24">
                <a-card :bordered="false">
                    <div style="height: calc(100% - 40px);">
                        <s-table
                                ref="table"
                                size="small"
                                :columns="columns"
                                :data="loadData"
                                rowKey="name"
                                :showPagination="false"
                                :rowSelection="rowSelection"
                                @rowClick="rowClick"
                                :rowClassName="rowClassName"
                        >
                        </s-table>
                    </div>
                </a-card>
            </a-col>
            <a-col :md="16" :sm="24">
                <a-card :bordered="false">
                    <div class="toolbar flex justify-end flex-wrap" style="width: 100%;">
                        <div class="table-page-search-wrapper">
                            <a-form layout="inline">
                                <div class="flex justify-between flex-wrap">
                                    <a-form-item label="">
                                        <a-input v-model="queryParamDicItem.tableName" placeholder="请输入要搜索的表名"/>
                                    </a-form-item>
                                    <div class="table-page-search-submitButtons flex">
                                        <a-button class="cu-btn-primary" @click="fetch()">查询</a-button>
                                        <a-button class="cu-btn-filter" @click="refreshSubList()">重置</a-button>
                                    </div>
                                </div>
                            </a-form>
                        </div>
                    </div>
                    <div class="page-common-sub-box">
                        <div style="height: calc(100% - 30);">
                            <a-table
                                    ref="subList"
                                    size="small"
                                    :columns="columnsDicItem"
                                    :data-source="dataSource"
                                    :rowSelection="rowSelectionDic"
                                    rowKey="tableName"
                                    showPagination="auto"
                                    :pagination="pagination"
                                    @change="handleTableChange"
                                    :scroll="scrollXY"
                            >
						    <span slot="serial" slot-scope="text, record, index">
						      {{ index + 1 }}
						    </span>
                            </a-table>
                        </div>
                    </div>
                </a-card>
            </a-col>
        </a-row>
    </t-modal>
</template>

<script>
    import {
        STable
    } from "@/components";
    import {dataListMixin} from "@/mixins/dataListMixin";
    import {simpleListMixin} from "@/mixins/simpleListMixin";

    export default {
        name: "TreeList",
        props: ["visible", "modalWidth"],
        mixins: [dataListMixin, simpleListMixin],
        components: {
            STable,
        },
        data() {
            return {
                title: "选择合适的数据表",
                confirmLoading: false,
                mdl: null,
                // 查询参数
                queryMasterParam: {},
                queryParamDicItem: {},
                userPost: [],
                // 表头
                columns: [{
                    title: "名称",
                    align: "center",
                    dataIndex: "name"
                }],
                columnsDicItem: [{
                    title: "#",
                    align: "center",
                    width: 50,
                    scopedSlots: {
                        customRender: "serial",
                    }
                },
                    {
                        title: "表名称",
                        align: "left",
                        dataIndex: "tableName"
                    },
                    {
                        title: "表注释",
                        align: "left",
                        dataIndex: "tableRemarks"
                    }
                ],
                orgTree: [],
                loadData: (parameter) => {
                    const requestParameters = Object.assign({}, parameter, this.queryMasterParam);
                    return this.$post(this.url.getMasterData, requestParameters).then(
                        (res) => {
                            return res;
                        }
                    );
                },
                dataSource: [],
                pagination: {
                    pageSize: 20,
                    showSizeChanger: true,
                    showQuickJumper: true,
                    hideOnSinglePage: false,
                    onShowSizeChange: (current, pageSize) =>
                        this.onShowSizeChange(current, pageSize),
                },
                selectedRowKeys: [],
                selectedRows: [],
                masterSelectedRowKeys: [],
                selectedRowKeysDic: [],
                selectedRowsDic: [],
                advanced: false,
                userNameId: "",
                dicUuids: "",
                info: "",
                infoUserPost: "",
                orgName: "",
                orgId: "",
                showFlag: true,
                subHeight: 0,
                url: {
                    getMasterData: "/system/sysDatabaseConnection/getPageSet",
                    getTable: "/system/sysDatabaseConnection/getTable",
                    getOrgTree: "/mdata/organization/getListByLevelId?levelId=1",
                    getUserList: "/mdata/user/getPageSet",
                    getTreeListByPid: "/mdata/organization/getListByPid",
                    getUserListByUuids: "/mdata/user/getListByUuids",
                },
            };
        },
        computed: {
            hasSelected() {
                return this.selectedRowKeys.length > 0;
            },
            scrollXY() {
                let subHeight = this.subHeight ? this.subHeight : 500
                let height = subHeight - 40 - 40
                return {y: height};
            },
            rowSelection() {
                return {
                    selectedRowKeys: this.masterSelectedRowKeys,
                    onChange: this.onSelectChangeMaster,
                };
            },
            rowSelectionDic() {
                return {
                    selectedRowKeys: this.selectedRowKeysDic,
                    onChange: this.onSelectChangeDic,
                    type: 'radio'
                };
            },
        },
        watch: {},
        created() {
            // 该方法触发屏幕自适应
            this.resetScreenSize();
            this.$nextTick(() => {
                this.subHeight = document.getElementsByClassName("page-common-sub-box")[0]?.clientHeight;
            })
        },
        methods: {
            // 获取列表
            fetch(params) {
                this.$post(this.url.getTable, this.queryParamDicItem).then(
                    (res) => {
                        this.selectedRowsDic = []
                        this.selectedRowKeysDic = []
                        this.dataSource = []
                        this.pagination = {}
                        this.pagination.total = 0
                        if (res.statusCode != 300) {
                            const pager = {
                                ...this.pagination,
                            };
                            pager.total = res.length;
                            this.dataSource = res;
                            this.pagination = pager;
                        }
                    }
                );
            },
            refreshSubList() {
                this.queryParamDicItem = {
                    uuid: this.queryParamDicItem.uuid
                };
                this.fetch()
            },
            close() {
                this.$emit("cancel")
            },
            handleSubmit() {
                //判断选择数据数量是否符合规定：一条
                // if (this.selectedRowsDic.length > 1) {
                //     this.$message.warn('只能选择一条数据！', 1.5)
                //     return
                // } else if (this.selectedRowsDic.length == 0) {
                //     this.$message.warn('请选择一条数据', 1.5)
                //     return
                // }
                this.close();
                this.$emit("ok", this.selectedRowsDic, this.selectedRowKeysDic.toString(), this.queryParamDicItem.uuid);
            },
            // 行点击事件
            rowClick(record, rows) {
                this.queryParamDicItem = {
                    uuid: record.uuid
                };
                this.fetch();
            },
            // 触发屏幕自适应
            resetScreenSize() {
                const screenWidth = document.body.clientWidth;
                if (screenWidth < 500) {
                    this.scrollTrigger = {
                        x: 800
                    };
                } else {
                    this.scrollTrigger = {};
                }
            },
            onSelectChangeResh(changeableRowKeys) {
                console.log(changeableRowKeys);
            },
            onSelectChange(selectedRowKeys, selectedRows) {
                this.selectedRowKeys = selectedRowKeys;
                this.selectedRows = selectedRows;
            },
            toggleAdvanced() {
                this.advanced = !this.advanced;
            },
            // 行勾选事件
            onSelectChangeDic(selectedRowKeys, selectedRows) {
                this.selectedRowKeysDic = selectedRowKeys;
                this.selectedRowsDic = selectedRows;
            },
        },
    };
</script>

<style lang="less" scoped="scoped">
    .t-row.ant-row {
        background: #fff !important;
    }

    .custom-tree {
        /deep/ .ant-menu-item-group-title {
            position: relative;

            &:hover {
                .btn {
                    display: block;
                }
            }
        }

        /deep/ .ant-menu-item {
            &:hover {
                .btn {
                    display: block;
                }
            }
        }

        /deep/ .btn {
            display: none;
            position: absolute;
            top: 0;
            right: 10px;
            width: 20px;
            height: 40px;
            line-height: 40px;
            z-index: 1050;

            &:hover {
                transform: scale(1.2);
                transition: 0.5s all;
            }
        }
    }
</style>
